Scratch card Module In Telegram Mini App | Scratch & Earn In Html

24 Nov 2025
Darwinbark
Web Development

Scratch card Module In Telegram Mini App | Scratch & Earn In Html | PHP

🚀 *Unlock Fun & Earnings with Our Scratch Card Module on Telegram Mini App!* 💰

In Below video, we dive deep into the innovative Scratch & Earn HTML module for Telegram Mini Apps. Learn how to create an engaging scratch card game that not only entertains but potentially earns you money! Whether you're a novice or an expert in PHP, our step-by-step tutorial will guide you through implementing this fun feature. Don't miss out on discovering tips and tricks for optimizing your watch time and maximizing earnings! 🎉 Subscribe for more exciting content and hit the bell icon for updates! 📲✨

How to use the Scratch & Earn module:

HTML:
Paste this inside the <body> tag of your HTML page:

<div id="appCapsule">
    <div class="section mt-4">
        <h2>Scratch & Earn Coins</h2>
        <div id="card-container">
            <div class="scratch-card" id="scratchCard">
                <div class="reward-layer" id="rewardLayer">
                    You Won: <span id="coinAmount"></span> Coins
                </div>
                <canvas id="scratchCanvas" width="300" height="300"></canvas>
            </div>
        </div>
        <div id="next-msg"></div>
    </div>
</div>

JavaScript:
Paste this script just before the closing </body> tag:

<script>
window.onload = function () {
    const canvas = document.getElementById('scratchCanvas');
    const ctx = canvas.getContext('2d');
    const rewardLayer = document.getElementById('rewardLayer');
    const coinAmountSpan = document.getElementById('coinAmount');
    const nextMsg = document.getElementById('next-msg');
    const width = canvas.width;
    const height = canvas.height;
    let isDrawing = false;
    let scratched = false;
    ctx.fillStyle = '#b3b3b3';
    ctx.fillRect(0, 0, width, height);
    ctx.globalCompositeOperation = 'destination-out';

    // Mouse Events
    canvas.addEventListener('mousedown', () => { if (!scratched) isDrawing = true; });
    canvas.addEventListener('mouseup', () => isDrawing = false);
    canvas.addEventListener('mouseleave', () => isDrawing = false);
    canvas.addEventListener('mousemove', scratch);

    // Touch Events
    canvas.addEventListener('touchstart', () => { if (!scratched) isDrawing = true; });
    canvas.addEventListener('touchend', () => isDrawing = false);
    canvas.addEventListener('touchmove', scratch);

    function scratch(e) {
        if (!isDrawing || scratched) return;
        let rect = canvas.getBoundingClientRect();
        let x, y;
        if (e.touches) {
            x = e.touches[0].clientX - rect.left;
            y = e.touches[0].clientY - rect.top;
        } else {
            x = e.clientX - rect.left;
            y = e.clientY - rect.top;
        }
        ctx.beginPath();
        ctx.arc(x, y, 22, 0, Math.PI * 2);
        ctx.fill();
        checkScratchCompletion();
    }

    function checkScratchCompletion() {
        const imgData = ctx.getImageData(0, 0, width, height);
        let cleared = 0;
        for (let i = 3; i < imgData.data.length; i += 4) {
            if (imgData.data[i] === 0) cleared++;
        }
        const percent = (cleared / (width * height)) * 100;
        if (percent > 50 && !scratched) revealReward();
    }

    function revealReward() {
        scratched = true;
        canvas.style.display = 'none';
        const coins = Math.floor(Math.random() * 151) + 50;
        coinAmountSpan.textContent = coins;
        rewardLayer.style.display = 'flex';
        showCongratsPopup(coins);
    }

    function showCongratsPopup(coins) {
        Swal.fire({
            title: "🎉 Congratulations!",
            html: `
                <div id="lottie" style="width:200px;height:200px;margin:auto;"></div>
                <h2>You Won <b>${coins}</b> Coins!</h2>
            `,
            showConfirmButton: true,
            confirmButtonText: "OK",
            didOpen: () => {
                lottie.loadAnimation({
                    container: document.getElementById('lottie'),
                    renderer: 'svg',
                    loop: true,
                    autoplay: true,
                    path: 'https://assets2.lottiefiles.com/packages/lf20_jbrw3hcz.json'
                });
            }
        }).then(() => {
            startCountdown();
        });
    }

    function startCountdown() {
        let sec = 5;
        nextMsg.style.display = "block";
        let timer = setInterval(() => {
            nextMsg.innerHTML = "Next card in " + sec + " sec...";
            sec--;
            if (sec < 0) {
                clearInterval(timer);
                nextMsg.innerHTML = "";
                resetCard();
            }
        }, 1000);
    }

    function resetCard() {
        scratched = false;
        rewardLayer.style.display = 'none';
        canvas.style.display = 'block';
        ctx.globalCompositeOperation = 'source-over';
        ctx.clearRect(0, 0, width, height);
        ctx.fillStyle = '#b3b3b3';
        ctx.fillRect(0, 0, width, height);
        ctx.globalCompositeOperation = 'destination-out';
    }
};
</script>

Notes:
- This module uses the canvas element to create the scratch effect.
- It randomly generates coins between 50 and 200.
- Uses SweetAlert2 (Swal.fire) for popups and Lottie for animation — be sure to include these libraries in your project for these features to work.
- After scratching more than 50% of the card, it reveals your reward and then resets after a short countdown.

If you want, I can also help you with the code to include SweetAlert2 and Lottie libraries or assist in integrating this with your Telegram Mini App backend. Just let me know!